/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/20 7:19 下午
 * @version V1.0
 */
import React, { useState, useEffect, useRef } from 'react';
import { Card, Col, Form, Input, Row, Select, InputNumber, Button, message } from 'antd';
import UploadImg from 'components/UploadImg';
import RichText from 'components/RichText';
import { history, useLocation } from 'umi';
import { reqCreateProduct, reqGetPcategory } from 'api/index';

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const width = {
    width: '100%',
};
const { Item } = Form;
const { Option } = Select;
const CreateProduct = () => {
    const { query: shop_info } = useLocation();
    const [form] = Form.useForm();
    form.setFieldsValue({
        shop: shop_info.shop_name,
    });
    const refRich = useRef();
    const imgRefT = useRef();
    const imgRefB = useRef();
    const [pcategoryOption, setPcategoryOption] = useState([]);
    const getPcategoryOption = async () => {
        const result = await reqGetPcategory();
        if (result.status === 1) {
            const pcategoryOption = result.data.list;
            setPcategoryOption(pcategoryOption);
        } else {
            message.error(result.message);
        }

    };
    useEffect(() => {
        getPcategoryOption();
    }, []);
    const submit = () => {

        const intro = refRich.current.cbRichHtml();
        const thumbnail = imgRefT.current.cbImgRef();
        const big_images = imgRefB.current.cbImgRef();


        if (big_images.length === 0) {
            message.warn('请上传商品详情图片');
            return;
        }
        if (intro === '<p></p>') {
            message.warn('请填写商品介绍');
            return;
        }
        if (thumbnail.length === 0) {
            message.warn('请上传商品图片');
            return;
        }
        form.validateFields().then(async values => {
            const { pname, original_price, price, stock } = values;
            values.shop_id = shop_info.shop_id;
            values.shop_name = shop_info.shop_name;
            values.category_id = values.categoryOption.key;
            values.category_name = values.categoryOption.label;
            values.big_images = big_images.map(file => file.url);
            values.intro = intro;
            values.spec_items = [{ thumbnail: thumbnail[0].url, pname, original_price, price, stock }];
            delete values.shop;
            delete values.categoryOption;
            delete values.pname;
            delete values.original_price;
            delete values.price;
            delete values.stock;

            const result = await reqCreateProduct(values);
            if (result.status === 1) {
                history.push('/news-manage/news/list');
            } else {
                message.error(result.message);
            }
        }).catch(info => {
        });
    };


    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="标题"
                            name="title"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入商品名称"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="关键字"
                            name="shop"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input disabled placeholder="请输入商品名称"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="领域"
                            name="categoryOption"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Select
                                placeholder="请选择商品分类"
                                labelInValue
                            >
                                {
                                    pcategoryOption.map(item => {
                                        return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                    })
                                }
                            </Select>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="组织ORG"
                            name="origin_place"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入商品产地"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="PER"
                            name="price"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <InputNumber style={width} placeholder="请输入现价"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="OGR"
                            name="original_price"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <InputNumber style={width} placeholder="请输入原价"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="封面图片"
                        >
                            <UploadImg
                                fileListDetail={[]}
                                imgRef={imgRefT}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                </Row>

                <Row>
                    <Col span={8}>
                        <Item
                            label="内容"
                        >
                            <RichText
                                template={''}
                                refRich={refRich}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
};

export default CreateProduct;

